<template>
	<view class="content">
		
		<view class="rows width90 marginLeft2 padding2" v-for="(item,index) in rowsData" :key="index" @tap="thisRows(index)">
			<view class="leftName fontSize14" :class=" index == 0 ? 'marginTop' : '' ">{{item.leftName}}</view>
			<input class="input overflow_one" maxlength="18" :type=" index == 2 || index == 4 ? 'number':'text' " :placeholder=" index == 2 ? item.value : item.placeholder" :value="item.value" v-if=" item.showInput && index !== 0 && index !== 2 && index !== 3 && index !== 4  && index !== 5 " @input="getValue">
			<image class="headImage" :src="item.headSrc" mode="" v-if=" index == 0 "></image>
			
			<view class="RightName fontSize14 overflow_one" v-if=" item.showInput == false && index !== 5 && index !== 0 || index == 2  ">{{item.value}}</view>
			<view class="RightName fontSize14 overflow_one" v-if=" item.showInput == false && index == 5 && maxName !== '' ">{{item.value}}</view>
			<view class="RightName fontSize14 overflow_one" v-if=" item.showInput == false && index == 5 && maxName == '' ">请选择区域</view>
			
			<view class="sexBox" v-if="index == 3 && item.showInput">
				<!-- 1男 2女 -->
				<view class="sexName" @tap="tapSex(1)">男</view>
				<image class="thisSex" src="/static/index/shopcar/icon_1.png" mode="" v-if="item.value == 1" @tap="tapSex(1)"></image>
				<view class="noneSex" @tap="tapSex(1)" v-if="item.value !== 1"></view>
				<view class="sexName" @tap="tapSex(2)">女</view>
				<image class="thisSex" src="/static/index/shopcar/icon_1.png" mode="" v-if="item.value == 2" @tap="tapSex(2)"></image>
				<view class="noneSex" @tap="tapSex(2)" v-if="item.value !== 2"></view>
				<view class="clearBoth"></view>
			</view>
			
			<view class="sexBox" v-if="index == 4 && item.showInput">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="sexName">{{date}}</view>
				</picker>
			</view>
			
			<view class="addrBox overflow_one" v-if="index == 5 && item.showInput ">
				<picker class="editMps overflow_one" mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray" @change="sureAddr">
					<view class="inputBox overflow_one fontSize14" v-if="maxName !== ''">{{ maxName }} - {{ middleName }} - {{ minName }}</view>
					<view class="inputBox fontSize14" v-if="maxName == ''">请选择地区</view>
				</picker>
			</view>
			<view class="clearBoth"></view>
		</view>
		
		<view class="saveBtn" @tap="editBtn">{{edit}}</view>
		
		
	</view>
</template>
<style>
	.content .saveBtn{width:90%;margin-left: 2.5%;border-radius: 100upx;padding:20upx;color:white;text-align: center;background:rgb(220,88,42);position: fixed;left:0;bottom:5%}
	.content .rows .sexBox{float: right;height:70upx;line-height: 70upx;}
	.content .rows .sexBox .thisSex{width:30upx;height:30upx;float:right;margin:25upx 10upx 0 30upx;}
	.content .rows .sexBox .noneSex{width:30upx;height:30upx;border-radius: 30upx;border: 2upx solid rgba(0,0,0,0.2);float:right;margin:25upx 10upx 0 30upx}
	.content .rows .sexBox .sexName{float:right;color:grey}
	.content .addrBox{float: right;width:70%;text-align: right;}
	.content .addrBox .inputBox{text-align: right;color:grey;width:100%;float: right;height:70upx;line-height: 70upx;}
	.content{width:100%;}
	.content .searchBox{width:95%;height: 90upx;line-height: 90upx;padding:0 2.5%;background:rgb(248,248,248);}
	.content .searchBox .clockBox{width:7.5%;margin-left: 2.5%;float: left;position: relative;}
	.content .searchBox .clockBox .iconClock{width:52upx;height:30upx;float: left;position: relative;top:14px}
	.content .searchBox .titleName{width:80%;float: left;text-align: center;font-weight: bold;}
	.content .searchBox .edit{float: left;width:10%;text-align: right;font-size: 12px;color:#C68660;}
	.content .rows{border-bottom: 1px solid #F2F2F5;padding:2% 2.5%}
	.content .rows .leftName{float:left;width:30%;height:70upx;line-height: 70upx;}
	.content .rows .RightName{float:right;color:grey;width:70%;text-align: right;height:70upx;line-height: 70upx;}
	.content .rows .headImage{width:90upx;height:90upx;border-radius: 90upx;float:right;}
	.content .rows .marginTop{margin-top: 30upx;}
	.content .rows .input{text-align: right;font-size: 12px;color:grey;height:70upx;line-height: 70upx;}
	.content .rows .uni-input-placeholder{font-size: 14px;margin-top: 2upx;color:grey}
</style>
<script>
	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		if (type === 'start') {
			year = year - 70;
		} else if (type === 'end') {
			year = year;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}
	import addrJson from "@/common/address.js"
	import Share from '@/common/wx_share.js'
	export default {
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				edit:"编辑",
				rowsData:[
					{"leftName":"用户头像",	"placeholder":"","value":"",showInput:false,"headSrc":""},
					{"leftName":"昵称",		"placeholder":"请输入昵称","value":"",showInput:false,"headSrc":""},
					{"leftName":"绑定手机",	"placeholder":"请输入手机","value":"",showInput:false,"headSrc":""},
					{"leftName":"性别",		"placeholder":"","value":"",showInput:false,"headSrc":""},
					{"leftName":"生日",		"placeholder":"请输入生日","value":"",showInput:false,"headSrc":""},
					// {"leftName":"地区",		"placeholder":"请选择地区","value":"",showInput:false,"headSrc":""},
					// {"leftName":"邮箱",		"placeholder":"请输入邮箱","value":"",showInput:false,"headSrc":""},
					// {"leftName":"真实姓名",		"placeholder":"请输入真实姓名","value":"",showInput:false,"headSrc":""},
				],
				rowIndex:"",
				imageToken:"",
				addrJson:"",
				
				date: getDate({
					format: true
				}),
				startDate:getDate('start'),
				endDate:getDate('end'),
				
				maxBox:[],
				middleBox:[],
				minBox:[],
				multiArray: [
					[],
					[],
					[],
				],
				multiIndex: [0, 0, 0],
				maxName:"",
				middleName:"",
				minName:"",
				threeFirstIndex:0,
				threeSecondIndex:0,
				threeThirdIndex:0,
				imageSrc:"",
			}
		},
		onLoad(e){
			this.share.path = this.share.path + "?userId=" + this._$userToken("userInfo").id
			// try {
			//     uni.setStorageSync('NewUserId', e.userId);
			// }catch(e){}
			this.AjaxLoad()
			this.AjaxGetToken()
		},
		methods: {
			AjaxLoad(){
				let param={
					token:this._$userToken("userInfo").token,
				};
				this._$InitRequest.request('MemberInfo/readprofile', param).then(res => {
					this.rowsData[0].headSrc = res.data.headimgurl
					this.rowsData[1].value = res.data.user_name
					this.rowsData[2].value = res.data.phone
					this.rowsData[4].value = res.data.birth
					if(  res.data.sex == 1 ){
						this.rowsData[3].value = "男"
					}else if(  res.data.sex == 2 ){
						this.rowsData[3].value = "女"
					}
					if( res.data.birth == "1970-01-01" ){
						this.rowsData[4].value = res.data.birth
						this.date = res.data.birthday
					}else{
						this.rowsData[4].value = res.data.birth
						this.date = res.data.birth
					}
					
					// if( res.data.email == "null " ){
					// 	this.rowsData[6].value = ""
					// }else{
					// 	this.rowsData[6].value = res.data.email
					// }
					// if( res.data.address.split("-")[0] !== undefined  ){
					// 	this.maxName = res.data.address.split("-")[0]
					// 	// this.maxName = ""
					// }
					// if( res.data.address.split("-")[1] !== " undefined "  ){
					// 	this.middleName = res.data.address.split("-")[1]
					// }
					// if( res.data.address.split("-")[2] !== " undefined "  ){
					// 	this.minName = res.data.address.split("-")[2]
					// }
					// this.rowsData[5].value = this.maxName +" - "+ this.middleName +" - "+ this.minName
				},error=>{})
			},
			AjaxGetToken(){
				let param={
					token:this._$userToken("userInfo").token
				};
				this._$InitRequest.request('index/get_token', param).then(res => {
					this.imageToken = res.data.token
					this.imageSrc = res.data.domain + "/"
				},error=>{})
			},
			getAddr(){
				this.addrJson = addrJson.json
				this.addrJson.forEach((item,index)=>{
					item.children.forEach((items,indexs)=>{
						items.children.forEach((itemA,indexA)=>{
							this.minBox.push(itemA)
						})
						this.middleBox.push(items)
					})
					this.maxBox.push(item)
				})
				this.maxBox.forEach((item,index)=>{
					this.multiArray[0].push(item.label)
				})
				this.middleBox.forEach((item,index)=>{
					if( index == 0 ){
						this.multiArray[1].push(item.label)
					}
				})
				this.minBox.forEach((item,index)=>{
					this.multiArray[2].push(item.label)
				})
			},
			editBtn(){
				//真实姓名
				// console.log( this.rowsData[7].value );
				var that = this;
				var sex = ""
				var date = ""
				if( this.edit == "保存" ){
					if( this.rowsData[3].value == 1 ){
						sex = 1
					}else if( this.rowsData[3].value == 2 ){
						sex = 2
					}
					let param={
						// user_id:this._$userToken("userInfo").id,
						// user_token:this._$userToken("userInfo").token,
						// nickname:this.rowsData[1].value,
						// sex:sex,
						// birthday:this.date,
						// email:this.rowsData[6].value,
						// headimgurl:this.rowsData[0].headSrc,
						// address:this.maxName +" - "+  this.middleName +" - "+ this.minName,
						// username:this.rowsData[7].value,
						token:this._$userToken("userInfo").token,
						user_name:this.rowsData[1].value,
						sex:sex,
						birth:this.date,
						headimgurl:this.rowsData[0].headSrc,
					};
					this._$InitRequest.request('MemberInfo/editprofile', param).then(res => {
						uni.showToast({icon:"success",title:res.mess})
						setTimeout(function(){
							uni.switchTab({
								url:"/pages/tabbar/mine"
							})
						},1500)
					},error=>{})
				}
				this.edit = "保存"
				for (var i = 0; i < that.rowsData.length; i++) {
					that.rowsData[i].showInput = true
				}
				if( this.rowsData[3].value == "男" ){
					this.rowsData[3].value = 1
				}else if( this.rowsData[3].value == "女" ){
					this.rowsData[3].value = 2
				}
			},
			thisRows(e){
				var that = this;
				this.rowIndex = e
				if( e == 0 ){
					if( this.rowsData[0].showInput == true ){
						uni.chooseImage({
						    count: 1,
						    sizeType: ['original', 'compressed'],
						    sourceType: ['album'],
						    success: function (res) {
								uni.uploadFile({
									// url:"https://up-z2.qbox.me",
									url:"https://upload.qiniup.com",
									// header:{"content-type":"multipart/form-data"},
									filePath:res.tempFilePaths[0],
									name: 'file',
									formData: {
										'token':that.imageToken
									},
									success: (res) => {
										that.rowsData[0].headSrc = that.imageSrc + JSON.parse( res.data ).key
										console.log( that.rowsData[0].headSrc  );
									},
								});
						    }
						});
					}
				}
			},
			getValue(e){
				this.rowsData[ this.rowIndex ].value = e.target.value
			},
			tapSex(e){
				if( e == 1 ){
					this.rowsData[3].value = e
				}else if( e == 2 ){
					this.rowsData[3].value = e
				}
			},
			bindDateChange: function(e) {this.date = e.detail.value},
			bindMultiPickerColumnChange: function(e) {
				this.multiArray[1] = []
				this.multiArray[2] = []
				this.multiIndex[e.detail.column] = e.detail.value
				if( e.detail.column == 0 ){
					this.multiIndex[1] = 0
					this.multiIndex[2] = 0
				}else if( e.detail.column == 1 ){
					this.multiIndex[2] = 0
				}else if( e.detail.column == 2 ){
					
				}
				this.addrJson[ this.multiIndex[0] ].children.forEach( (item,index) =>{
					if( this.multiIndex[1] == index ){
						item.children.forEach( (items,indexs) =>{
							this.multiArray[2].push(items.label)
						})
					}
					this.multiArray[1].push(item.label)
				})
				this.$forceUpdate()
				// console.log( this.multiArray[1] );
			},
			sureAddr(){
				this.maxName = this.multiArray[0][ this.multiIndex[0] ]
				this.middleName = this.multiArray[1][ this.multiIndex[1] ] 
				this.minName = this.multiArray[2][ this.multiIndex[2] ]
			},


		}
	}
</script>